import React from "react";
import { Modal ,Button} from "antd-mobile";
import ReactPullLoad, { STATS } from "react-pullload";
import "../../../../node_modules/react-pullload/dist/ReactPullLoad.css";


export default class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 1,
      uinfo: [],
      hasMore: true,
      data: [],
      action: STATS.init,
      page: 1,
			visible: false,
			
			modal1: false,
			modal2: false,
      shuju1:{},
      uid:""
			
			
    };
  }
  componentDidMount() {
    document.title = "排行榜";
    this.getList();
  }
  getList() {
    var req = {
      page: 1,
      size: 12,
      type: this.state.type,
    };
    global.Ajax.hhtc_request("dynamic/rank_list", req).then((data) => {
      console.log("data:111111111 ", data);
      if (data.code === 1) {
        var hasMore;
        if (data.data.length > 0) {
          this.state.page++;
          hasMore = true;
        } else {
          hasMore = false;
        }
        this.setState({
          data: data.data.data,
          hasMore: hasMore,
          page: this.state.page,
          uinfo: data.data.uinfo,
        });
      }
    });
  }
  // 获取商品
  handleAction = (action) => {
    console.info(action, this.state.action, action === this.state.action);
    //new action must do not equel to old action
    if (action === this.state.action) {
      return false;
    }
    if (action === STATS.refreshing) {
      //刷新
      this.handRefreshing();
    } else if (action === STATS.loading) {
      //加载更多
      this.handLoadMore();
    } else {
      //DO NOT modify below code
      this.setState({
        action: action,
      });
    }
  };
  handRefreshing = () => {
    if (STATS.refreshing === this.state.action) {
      return false;
    }
    var req = {
      page: 1,
      size: 12,
      type: this.state.type,
    };
    global.Ajax.hhtc_request("dynamic/rank_list", req).then((data) => {
      console.log("data: ", data);
      if (data.code === 1) {
        var hasMore;
        if (data.data.length > 0) {
          this.state.page++;
          hasMore = true;
        } else {
          hasMore = false;
        }
        this.setState({
          data: data.data.data,
          hasMore: hasMore,
          action: STATS.refreshed,
          page: this.state.page,
          uinfo: data.data.uinfo,
        });
      }
    });
    this.setState({
      action: STATS.refreshing,
    });
  };
  handLoadMore = () => {
    if (STATS.loading === this.state.action) {
      return false;
    }
    //无更多内容则不执行后面逻辑
    if (!this.state.hasMore) {
      return;
    }
    var req = {
      page: this.state.page,
      size: 12,
      type: this.state.type,
    };
    global.Ajax.hhtc_request("dynamic/rank_list", req).then((data) => {
      console.log("data: ", data);
      if (data.code === 1) {
        if (data.data.length > 0) {
          this.setState({
            data: this.state.data.concat(data.data.data),
            action: STATS.reset,
          });
        } else {
          this.setState({
            action: STATS.reset,
            hasMore: false,
          });
        }
      }
    });
    this.setState({
      action: STATS.loading,
    });
  };
  changeType(type) {
    this.setState(
      {
        type,
      },
      () => {
        this.getList();
      }
    );
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
 
	showModal = key => (e) => {
   
    // 现象：如果弹出的弹框上的 x 按钮的位置、和手指点击 button 时所在的位置「重叠」起来，
    // 会触发 x 按钮的点击事件而导致关闭弹框 (注：弹框上的取消/确定等按钮遇到同样情况也会如此)
    // this.state.uid 


     var  req ={
       uid:11
     }
    
		global.Ajax.hhtc_request("dynamic/exceptional",req).then((data) => {
			console.log('data: ', data);
			this.setState(
				{
					shuju1:data.data[0]
				}
			)
			console.log(this.state.shuju1);
      
    });



    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }
  // 显示  this.showModal('modal1')
  xianshi(res){
    console.log('res: ', res);
    
    
    // this.setState({
    //   uid:res.id
    // })
   
    console.log('this.state.uid: ', this.state.uid);
  
   
    this.showModal('modal1')
    console.log(555);
    
  }
  render() {
    return (
      <div
        className=''
        style={{ height: "100vh", background: "#16B998", overflow: "hidden" }}
      >


				 
        <div className='learn_tab learn_tab1'>
          <p
            className={this.state.type === 1 ? "active" : ""}
            onClick={this.changeType.bind(this, 1)}
          >
            PK排行榜
          </p>
          <p
            className={this.state.type === 2 ? "active" : ""}
            onClick={this.changeType.bind(this, 2)}
          >
            公益排行榜
          </p>
        </div>
        <div className='dun_box'>
          <div className='threeth'>
            {this.state.data[2] && (
              <div className='head'>
                <img
                  alt=''
                  src={require("../../imgs/threeth.png")}
                  className='queen_icon'
                />
                <img alt='' src={this.state.data[2].avatar} className='h_img' />
              </div>
            )}

            <img
              alt=''
              src={require("../../imgs/threethbg.png")}
              className='dun3'
            />
            {this.state.data[2] && (
              <React.Fragment>
                <p className='name'>{this.state.data[2].nickname}</p>
                <p className='num'>
                  {this.state.data[2].num}
                  {this.state.type === 1 && " 颗"}
                </p>
              </React.Fragment>
            )}
          </div>
          <div className='firth' onClick={this.showModal('modal1')}>
            {this.state.data[0] && (
              <div className='head'>
                <img
                  alt=''
                  src={require("../../imgs/firth.png")}
                  className='queen_icon'
                />
                <img alt='' src={this.state.data[0].avatar} className='h_img' />
              </div>
            )}
            <img
              alt=''
              src={require("../../imgs/firthbg.png")}
              className='dun1'
            />
            {this.state.data[0] && (
              <React.Fragment>
                <p className='name'>{this.state.data[0].nickname}</p>
                <p className='num'>
                  {this.state.data[0].num}
                  {this.state.type === 1 && " 颗"}
                </p>
              </React.Fragment>
            )}
          </div>
          <div className='twoth'>
            {this.state.data[1] && (
              <div className='head'>
                <img
                  alt=''
                  src={require("../../imgs/twoth.png")}
                  className='queen_icon'
                />
                <img alt='' src={this.state.data[1].avatar} className='h_img' />
              </div>
            )}
            <img
              alt=''
              src={require("../../imgs/twothbg.png")}
              className='dun2'
            />
            {this.state.data[1] && (
              <React.Fragment>
                <p className='name'>{this.state.data[1].nickname}</p>
                <p className='num'>
                  {this.state.data[1].num}
                  {this.state.type === 1 && " 颗"}
                </p>
              </React.Fragment>
            )}
          </div>
        </div>
        <div className='list_box'>
          {this.state.uinfo.num != undefined && (
            <div className='mine_box'>
              <p className='paim'>{this.state.uinfo.pm}</p>
              <img alt='' src={this.state.uinfo.avatar} className='head' />
              <p className='name'>{this.state.uinfo.nickname}</p>
              <p className='num'>
                {this.state.uinfo.num}
                {this.state.type === 1 && " 颗"}
              </p>
            </div>
          )}
          <div className='box'>
            {this.state.data.map((item, index) => {
              if (index > 2) {
                return (
                  <div
                    className='row'
                    key={"row" + index}
                   
                  >
                    <p className='paim'>{index + 1}</p>
                    <img alt='' src={item.avatar} className='head' />
                    <p className='name'>{item.nickname}</p>
                    <p className='num'>
                      {item.num}
                      {this.state.type === 1 && " 颗"}
                    </p>
                  </div>
                );
              }
            })}
						{/* <Modal
         
          transparent
          maskClosable={false}
          visible={this.state.modal1}
          onClose={this.onClose('modal1')}
          footer={[{ text: '确定', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
       	 >
					<div>
					<img alt='' src={this.state.shuju1.avatar}  style={{ height: "20vh", background: "#16B998", overflow: "hidden" }}/><br />
						nickname: {this.state.shuju1.nickname}<br />
						num:	{this.state.shuju1.num}<br />
					</div>
        </Modal> */}
          </div>
          
        </div>
			
      </div>
    );
  }
}
